import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Form, Input, Button, Checkbox, Card, message } from "antd";
import "./../../assets/css/login.less";
import loginLogo from "./../../assets/img/loginLogo.png";
import { loginAPI } from "../../apis/userAPI";
import { setStorage } from "../../utils/storageUtils";
export default class index extends Component {
  onFinish = (values) => {
    console.log("Success:", values);
    this.login(values)

  };
  onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  login = async (params) => {
    const res = await loginAPI(params)
    console.log('login', res);
    if (res.data.code) {
      const { token, userInfo } = res.data.data
      setStorage('token', token)
      setStorage('userInfo', userInfo)
      message.success('登录成功')
      this.props.history.push("/home")
    } else {
      message.error('登录失败')
    }
  }
  render() {
    return (
      <div className="con">
        <Card
          className="loginForm"
          bordered={true}
          hoverable={true}
          cover={<img src={loginLogo}></img>}
        >
          <Form
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="账户"
              name="account"
              rules={[
                {
                  required: true,
                  message: "Please input your username!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "Please input your password!",
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                登录
              </Button>
              <Link to="/register">没有账号？去注册</Link>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}
